<script lang="ts" setup name="takeoutOrder">
import ProTable from "@/components/ProTable/index.vue";
import { ref, onMounted, reactive } from "vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface/index";
import { takeoutStatusList } from "@/utils/serviceDict";
import { getTakeoutOrderListAPI } from "@/api/modules/takeout";
import { useRouter } from "vue-router";

const router = useRouter();

const proTableRef = ref<ProTableInstance>();

const columns = reactive<ColumnProps[]>([
  {
    type: "index",
    label: "序号",
    width: 80
  },
  {
    sortable: true,
    prop: "orderNo",
    label: "外卖单号",
    search: {
      el: "input",
      label: "外卖号查询"
    }
  },
  {
    sortable: true,
    prop: "sourceTypeName",
    label: "外卖类型"
  },
  {
    sortable: true,
    prop: "daySeq",
    label: "流水号",
    width: 130
  },
  {
    sortable: true,
    prop: "orderDate",
    label: "下单时间",
    search: {
      el: "date-picker",
      key: "timeValue",
      order: 1,
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD HH:mm",
        valueFormat: "YYYY-MM-DD HH:mm"
      }
    }
  },
  {
    sortable: true,
    label: "收货人",
    prop: "recipientName",
    width: 120
  },
  {
    sortable: true,
    label: "要求送货时间",
    prop: "deliveryTimeStr",
    width: 150
  },
  {
    sortable: true,
    label: "订单金额",
    prop: "sumAllAmount",
    width: 110
  },
  {
    sortable: true,
    label: "订单状态",
    prop: "statusName",
    width: 110,
    enum: takeoutStatusList,
    isFilterEnum: false,
    search: {
      el: "select",
      key: "status"
    }
  },
  {
    sortable: true,
    label: "备注",
    prop: "caution"
  },
  {
    sortable: true,
    label: "异常原因",
    prop: "reason",
    width: 150
  }
]);

const goDetail = (orderId: number) => {
  router.push("/restaurant/operation/takeoutOrderEdit?orderId=" + orderId);
};
</script>

<template>
  <div class="table-box">
    <ProTable ref="proTableRef" :columns="columns" :request-api="getTakeoutOrderListAPI">
      <template #orderNo="{ row }">
        <div style="color: #f3c45d; cursor: pointer" @click="goDetail(row.orderNo)">
          {{ row.orderNo }}
        </div>
      </template>
    </ProTable>
  </div>
</template>

<style lang="scss" scoped></style>
